<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品信息</title>
<link rel="stylesheet" href="css/products.css" />
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				$(".divcart").mouseover(function(){
					$(".cart").show();
				});
				$(".divcart").mouseleave(function(){
					$(".cart").hide();
				});
				$(".menu_ul_li1").mouseover(function(){
					$(".menu_li1_d").show();
				});
				$(".menu_ul_li1").mouseleave(function(){
					$(".menu_li1_d").hide();
				});
				$(".menu_d_nav_li:eq(0)").mouseover(function(){
					$(".menu_d_nav_li>div:eq(0)").show();
					$(".menu_d_nav_li>div:not(eq(0))").hide();
				});
				$(".menu_d_nav_li:eq(0)").mouseleave(function(){
					$(".nav_more").hide();
				});
				$(".menu_d_nav_li:eq(1)").mouseover(function(){
					$(".menu_d_nav_li>div:eq(1)").show();
					$(".menu_d_nav_li>div:not(eq(1))").hide();
				});
				$(".menu_d_nav_li:eq(1)").mouseleave(function(){
					$(".nav_more").hide();
				});
				$(".menu_d_nav_li:eq(2)").mouseover(function(){
					$(".menu_d_nav_li>div:eq(2)").show();
					$(".menu_d_nav_li>div:not(eq(2))").hide();
				});
				$(".menu_d_nav_li:eq(2)").mouseleave(function(){
					$(".nav_more").hide();
				});
				$(".menu_d_nav_li:eq(3)").mouseover(function(){
					$(".menu_d_nav_li>div:eq(3)").show();
					$(".menu_d_nav_li>div:not(eq(3))").hide();
				});
				$(".menu_d_nav_li:eq(3)").mouseleave(function(){
					$(".nav_more").hide();
				});
				$(".menu_d_nav_li:eq(4)").mouseover(function(){
					$(".menu_d_nav_li>div:eq(4)").show();
					$(".menu_d_nav_li>div:not(eq(4))").hide();
				});
				$(".menu_d_nav_li:eq(4)").mouseleave(function(){
					$(".nav_more").hide();
				});
				$(".jian").click(function(){
				var sl = window.parseInt($(".num").val());
				//console.log($(".kdfspan").text())
				if(sl==1){
				 alert("此商品购买数量不能小于1")
				}else{
					$(".num").val(sl - 1);
					
				}
				})
				$(".jia").click(function(){
					var sl = window.parseInt($(".num").val());
					
					$(".num").val(sl + 1);
					
				})
				//选项卡
				$(".box_header_1").click(function(){
					$(".box_header_1").css("border-top","1px solid red");
					$(".box_header_1").css("border-bottom","0px");
					$(".box2>.bon>ul>li:not(:eq(0))").hide();
					$(".box2>.bon>ul>li:eq(0)").show();
					$(".box>ul>li:not(:eq(0))").css("border-top","1px solid #dedede");
					$(".box>ul>li:not(:eq(0))").css("border-bottom","1px solid #dedede");
				});
				$(".box_header_2").click(function(){
					$(".box_header_2").css("border-top","1px solid red");
					$(".box_header_2").css("border-bottom","0px");
					$(".box2>.bon>ul>li:not(:eq(1))").hide();
					$(".box2>.bon>ul>li:eq(1)").show();
					$(".box>ul>li:not(:eq(1))").css("border-top","1px solid #dedede");
					$(".box>ul>li:not(:eq(1))").css("border-bottom","1px solid #dedede");
				});
				$(".box_header_3").click(function(){
					$(".box_header_3").css("border-top","1px solid red");
					$(".box_header_3").css("border-bottom","0px");
					$(".box2>.bon>ul>li:not(:eq(2))").hide();
					$(".box2>.bon>ul>li:eq(2)").show();
					$(".box>ul>li:not(:eq(2))").css("border-top","1px solid #dedede");
					$(".box>ul>li:not(:eq(2))").css("border-bottom","1px solid #dedede");
				});
				$(".box_header_4").click(function(){
					$(".box_header_4").css("border-top","1px solid red");
					$(".box_header_4").css("border-bottom","0px");
					$(".box2>.bon>ul>li:not(:eq(3))").hide();
					$(".box2>.bon>ul>li:eq(3)").show();
					$(".box>ul>li:not(:eq(3))").css("border-top","1px solid #dedede");
					$(".box>ul>li:not(:eq(3))").css("border-bottom","1px solid #dedede");
				});
				$(".addcart").click(function(){
					$.get("products?action=addgoods",{
						goodname : $(this).attr("goodname"),
						goodnum : $(".num").val()
					},function(){
						alert("添加成功");
					})
				});
			});
		</script>
</head>
<body>
	<div class="head">
			<div class="head_1">
				<div class="welcome">
					欢迎来到RottenEgg网上商城
				<ul>
					<li>|&nbsp;&nbsp;<a href="">个人中心</a>&nbsp;&nbsp;</li>
					<li>|&nbsp;&nbsp;<a href="">申请开店</a>&nbsp;&nbsp;</li>
					<li>|&nbsp;&nbsp;<a href="">商家管理</a>&nbsp;&nbsp;</li>
					<li>|&nbsp;&nbsp;<a href="">使用帮助</a></li>
				</ul>
				</div>
			</div>	
		</div>
		<div class="main">
			
			<div class="main_first">
				<div class="main_first_1">
					<div class="main_logo">
						<a href="cindex?action=querySort"><img src="image/logo.png"/></a>
					</div>
					<div class="main_first_2">
						<div class="main_first_i">
							<form>
								<input type="text" class="main_first_input"/>
								<input type="submit" class="main_first_sub" value="搜索" />
							</form>	
							<div class="divcart">
								<a href="cart?action=querySort"><input type="button" value="车" class="main_first_btn" /></a>
								
							</div>
							
							<div class="main_first_help">
								<div class="main_first_h"><a href="c_login.jsp">登录</a>&nbsp;&nbsp;<span style="color: gainsboro;">|</span>&nbsp;&nbsp;<a href="cuser_reg.jsp">注册</a></div>
							</div>
						</div>
						
					</div>
				</div>
			</div>	
			<div class="main_second">
				<div class="main_second_menu">	
					<ul class="menu_ul">				
						<a href="cindex?action=querySort">
							<li class="menu_ul_li1">
								<a href="cindex?action=querySort" class="menu_ul_a">
								<span class="menu_ul_li1_span1">全部商品</span>
								</a>
								<div class="menu_li1_d" style="display:none;">
									<ul class="menu_d_nav">
										<c:forEach items="${firstsort}" var="u" varStatus="vs">
											<li class="menu_d_nav_li">
												<a href="clist1?action=querySort&list1=${u }">
													<span class="nav2" style="color:white;">${u }</span>
												</a><br/>										
												<c:forEach items="${sortlist }" var="s" varStatus="ss">
													<c:if test="${ss.index eq vs.index }">
														<c:forEach items="${s}" var="n" varStatus="ns">
															<a href="clist2?action=querySort&list2=${n }">${n }</a>
														</c:forEach>
													</c:if>
												</c:forEach>
												<div class="nav_more">	
													<a href="clist1?action=querySort&list1=${u }"><h3>${u }</h3></a>
													<ul class="nav_more_list">
														<c:forEach items="${sortlist }" var="b" varStatus="bs">	
															<li>
															<c:if test="${bs.index eq vs.index }">
																<c:forEach items="${b}" var="c" varStatus="cs">
																	<a href="clist2?action=querySort&list2=${c }">${c }</a>
																</c:forEach>
															</c:if>
															</li>
														</c:forEach>
													</ul>
													<ul class="nav_content">
															<c:forEach items="${namelist }" var="x" varStatus="xs">
																<c:if test="${xs.index eq vs.index }"> 
																	<c:forEach items="${x }" var="y" varStatus="ys">
																		<a href="products?action=querySort&gname=${y }">
																			<li class="nav_content_li">
																				<c:forEach items="${pholist }" var="p" varStatus="ps">
																					<c:if test="${ps.index eq vs.index }">
																						<c:forEach items="${p}" var="h" varStatus="hs">
																							<c:if test="${hs.index eq ys.index}">
																								<img src="${h }">
																							</c:if>
																						</c:forEach>
																					</c:if>
																				</c:forEach>	
																				<h3>${y }</h3>	
																				<c:forEach items="${pricelist }" var="u" varStatus="us">
																					<c:if test="${us.index eq xs.index }">
																						<c:forEach items="${u }" var="z" varStatus="zs">
																							<c:if test="${zs.index eq ys.index}">
																								<p>${z}</p>
																							</c:if>
																						</c:forEach>
																					</c:if>
																				</c:forEach>	
																			</li>
																		</a>
																	</c:forEach>
																</c:if>
															</c:forEach>
														</ul>
													</div> 		
												</li>
											</c:forEach>
											
										</ul>
									</div>
							</li>
						</a>
						<a href="cindex?action=querySort" class="menu_ul_a"><li class="menu_ul_li2"><span class="menu_ul_li2_span">首 页</span></li></a>
						<a href="" class="menu_ul_a"><li class="menu_ul_li3"><span class="menu_ul_li2_span">商家列表</span></li></a>
						<a href="" class="menu_ul_a"><li class="menu_ul_li4"><span class="menu_ul_li2_span">后台管理</span></li></a>
				</ul>
				</div>
			</div>
			
			<div class="p_third">
				<div class="main_third_head">
					<span class="third_head_span">
						您当前所在的位置：<a href="cindex?action=querySort">首页</a>&nbsp;>&nbsp;<a href="clist1?action=querySort&list1=${goodbean.g_keyword }">${goodbean.g_keyword }</a>&nbsp;>&nbsp;<a href="clist2?action=querySort&list2=${goodbean.classify }">${goodbean.classify }</a>&nbsp;>&nbsp;${gname }
					</span>
				</div>
				<div class="third_body">
					<div class="goods_pho">
						<div class="showpho">
							<img src="${firstpho }" />
						</div>
						<div class="chancepho">
							<ul>
								<c:forEach items="${productpho }" var="pro" varStatus="prost">
									<li class="change_li"><img src="${pro }"/></li>
								</c:forEach>						
							</ul>
						</div> 
						<script type="text/javascript">
									$(function(){
										var img1=$(".chancepho>ul>li>img:eq(0)")[0].src;
										var img2=$(".chancepho>ul>li>img:eq(1)")[0].src;
										var img3=$(".chancepho>ul>li>img:eq(2)")[0	].src;
										$(".chancepho>ul>li:eq(0)").click(function(){
											$(".showpho img").attr("src",img1);
										});
										$(".chancepho>ul>li:eq(1)").click(function(){
											$(".showpho img").attr("src",img2);
										});
										$(".chancepho>ul>li:eq(2)").click(function(){
											$(".showpho img").attr("src",img3);
										});
									})
						</script>	
					</div>
					<div class="goods_des">
						<form action="cart2?action=buy" method="post">
							<div class="des_title" name="gname">
								${gname }
							</div>
							<ul>
								<input type="hidden" value="${gname }" name="gname">
								<input type="hidden" value="${goodbean.g_price }" name="gprice">
								<input type="hidden" value="${goodbean.g_code }" name="gcode">
								<li class="des_li1"><span class="des_1" name="gcode">${goodbean.g_code }</span></li>
								<li class="des_li2"><span class="des_2">销售价：</span><span class="des_price">￥${goodbean.g_price }</span></li>
								<li class="des_li3">市场价：￥<span class="des_3">${goodbean.g_price }</span></li>
								<li class="des_li4">库存：${goodbean.g_stock }</li>
								<li class="star">顾客评分：</li>
								<li class="des_ways">至<a href="">湖南></a>：快递：￥<span>0.0</span>（直接由第三方物流公司配送）货到付款：￥<span>0.0</span>（直接由第三方物流公司配送）</li>
							</ul>
							<div class="goods_buy">
								<span class="goumaishu">购买数量:</span>
								<div class="gm_numberone">
									<span class="jian">-</span>
									<input type="text" name="gnum" id="" value="1" class="num"/>
								    <span class="jia">+</span>
								</div>
								<a href="cart2?action=querySort">
									<div class="lijibuy">
									<input type="submit" value="立即购买" class="lijisub"/>
								    </div>
								</a>
								<a href="javascript:void(0)" class="addcart" goodname=${gname }>
									<div class="jiarugou">
									<img src="image/jiaru2.png"/>
									<span>加入购物车</span>
								    </div>
								</a>
							</div>
						</form>
						
					</div>
				
			</div>
			<div class="p_forth">
					<div class="hotsort">
						<h3>热卖排行</h3>
						<ul class="hotsort_ul">
							<c:forEach items="${arrhotname }" var="hotname" varStatus="hotnamest" end="6">
								<div class="sort">${hotnamest.index+1 }</div>
								<a href="products?action=querySort&gname=${hotname }">
								<li class="hotsort_ul_li1">
									<c:forEach items="${arrhotpho }" var="hotpho" varStatus="hotphost">
										<c:if test="${hotphost.index eq hotnamest.index }">
											<img src= ${hotpho } />
										</c:if>
									</c:forEach>
									
									<div class="sort_des">
										${hotname }
										 <c:forEach items="${arrhotprice }" var="hotprice" varStatus="hotpricest">
										 	<c:if test="${hotpricest.index eq hotnamest.index}">
										 		<p>$ ${hotprice } </p>
										 	</c:if>
										 </c:forEach>
									</div>
								</li>	
								</a>
							</c:forEach>						
						</ul>
					</div>
					<div class="goods_main">
						<div class="box"> 
						    <ul class="box_header"> 
						        <li class="box_header_1">产品详情</li> 
						        <li class="box_header_2">顾客评价</li> 
						        <li class="box_header_3">购买记录</li> 
						        <li class="box_header_4">顾客咨询</li> 
						    </ul> 
						</div> 
						
						
						<div class="box2">
						    <div class="bon"> 
						        <ul> 
						            <li> 
						                <ul> 
						                    <li class="bon_des">
						                    	<div class="bon_des_1">商品名称：<span></span></div>
						                    	<div class="bon_des_1">商品毛重：20.00g</div>
						                    	<div class="bon_des_1">单位：个</div>
						                    	<div class="bon_des_1">上架时间：2018-9-22  01:38:06</div>
						                    </li> 
						                    <li class="goods_des">
						                    	产品描述：${gooddes}<br/>
						                   		<c:forEach items="${productpho }" var="pho" varStatus="phost">
						                   			<img src="${pho }" />
						                   		</c:forEach>
						                    </li>
						                </ul> 
						            </li> 
						            <li style="display:none;"> 
						                <ul> 
						                    <li>1</li> 
						                    <li></li> 
						                    <li></li> 
						                    <li></li> 
						                </ul> 
						            </li> 
						            <li style="display:none;"> 
						                <ul> 
						                    <li>1</li> 
						                    <li></li> 
						                    <li></li> 
						                    <li></li> 
						                </ul> 
						            </li> 
						            <li style="display:none;">
						            	<ul>
						            		<li>1</li>
						            	</ul>
						            </li>
						        </ul> 
						    </div> 
						</div>
					</div>
				</div>
			</div>
			
		</div>
		<div class="foot">
			<div class="foot1">
				
					<div style="height: 360px;width: 1200px;">
						<ul class="foot_ul1">
							<li style="margin-left: 0px;"><img src="image/zhengpin.png" /></li>
							<li style="margin-left: 20px;">正品优选</li>
							<li><img src="image/shangshi.png" /></li>
							<li style="margin-left: 20px;">上市公司</li>
							<li><img src="image/liansuo2.png" /></li>
							<li style="margin-left: 20px;">3000家连锁门店</li>
							<li><img src="image/weixiudian.png" /></li>
							<li style="margin-left: 20px;">上百家维修网点 全国联保</li>
						</ul>

						<div class="foot_div1">
							<ul class="foot_ul2">
								<li class="foot_li2">▁▁</li>
								<li>
									<a href="cindex?action=querySort" style="font-size: 15px;color: rgb(58, 58, 58);">购物指南</a>
								</li>
								<li>
									<a href="cindex?action=querySort">购物流程</a>
								</li>
								<li>
									<a href="cindex?action=querySort">会员制度</a>
								</li>
								<li>
									<a href="cindex?action=querySort">积分说明</a>
								</li>
								<li>
									<a href="cindex?action=querySort">交易条款</a>
								</li>
								<li>
									<a href="cindex?action=querySort">订单状态</a>
								</li>
							</ul>
							<ul class="foot_ul3">
								<li class="foot_li2">▁▁</li>
								<li>
									<a href="cindex?action=querySort" style="font-size: 15px;color: rgb(58, 58, 58);">支付帮助</a>
								</li>
								<li>
									<a href="cindex?action=querySort">货到付款</a>
								</li>
								<li>
									<a href="cindex?action=querySort">在线支付</a>
								</li>
								<li>
									<a href="cindex?action=querySort">银行电汇</a>
								</li>
								<li>
									<a href="cindex?action=querySort">余额支付</a>
								</li>
								<li>
									<a href="cindex?action=querySort">支付帮助</a>
								</li>
							</ul>
							<ul class="foot_ul4">
								<li class="foot_li2">▁▁</li>
								<li>
									<a href="cindex?action=querySort" style="font-size: 15px;color: rgb(58, 58, 58);">配送帮助</a>
								</li>
								<li>
									<a href="cindex?action=querySort">配送范围及运费</a>
								</li>
								<li>
									<a href="cindex?action=querySort">上门自提</a>
								</li>
								<li>
									<a href="cindex?action=querySort">加急快递</a>
								</li>
								<li>
									<a href="cindex?action=querySort">商品验货与签收</a>
								</li>
								<li>
									<a href="cindex?action=querySort">EMS/邮政普包</a>
								</li>
							</ul>
							<ul class="foot_ul5">
								<li class="foot_li2">▁▁</li>
								<li>
									<a href="cindex?action=querySort" style="font-size: 15px;color: rgb(58, 58, 58);">售后服务</a>
								</li>
								<li>
									<a href="cindex?action=querySort">换货说明</a>
								</li>
								<li>
									<a href="cindex?action=querySort">退货说明</a>
								</li>
								<li>
									<a href="cindex?action=querySort">退/换货注意事项</a>
								</li>
								<li>
									<a href="cindex?action=querySort">余额的使用与提现</a>
								</li>
								<li>
									<a href="cindex?action=querySort">发票制度</a>
								</li>
							</ul>
							<ul class="foot_ul6">
								<li class="foot_li2">▁▁</li>
								<li>
									<a href="cindex?action=querySort" style="font-size: 15px;color: rgb(58, 58, 58);">帮助信息</a>
								</li>
								<li>
									<a href="cindex?action=querySort">关于我们</a>
								</li>
								<li>
									<a href="cindex?action=querySort">常见问题</a>
								</li>
								<li>
									<a href="cindex?action=querySort">找回密码</a>
								</li>
								<li>
									<a href="cindex?action=querySort">退订邮件/短信</a>
								</li>
								<li>
									<a href="cindex?action=querySort">联系客服</a>
								</li>
							</ul>

							<div class="foot_div2">
								<span class="foot_li2">▁▁</span><br /><br />
								<span style="font-size: 23px;color: rgb(58,58,58);">400-888-8888</span><br />
								<span style="font-size: 12px;color: rgb(102,102,102);">24小时在线客服(仅售市话费)</span><br /><br />
								<a href="">
									<div class="foot_div3">
										<span>在线客服</span>
									</div>
								</a>
							</div>
						</div>
					</div>
				
			</div>
			<div class="foot2">
				<ul class="foot_ul7">
					<li>
						<a href="cindex?action=querySort">关于我们</a>
					</li>
					<li><span>|</span>
						<a href="cindex?action=querySort">常见问题</a>
					</li>
					<li><span>|</span>
						<a href="cindex?action=querySort">安全交易</a>
					</li>
					<li><span>|</span>
						<a href="cindex?action=querySort">购买流程</a>
					</li>
					<li><span>|</span>
						<a href="cindex?action=querySort">如何付款</a>
					</li>
					<li><span>|</span>
						<a href="cindex?action=querySort">联系我们</a>
					</li>
					<li><span>|</span>
						<a href="cindex?action=querySort">合作提案</a>
					</li>
				</ul>
				<span class="foot_span2">
           	Powered by <a href="cindex?action=querySort">RottenEgg</a>
           </span>
				<span class="foot_span3">
           	Copyright © 2005-2014 <a href="cindex?action=querySort">湘ICP备01000010号</a>
           </span>
			</div>
		</div>
</body>
</html>